<html>
<head>

    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="{{asset("datatables/css/jquery.dataTables.css")}}">
    <link rel="stylesheet" type="text/css" href="{{asset("css/datatables.bootstrap.css")}}">
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="{{asset("datatables/js/jquery.js")}}"></script>
    <script type="text/javascript" charset="utf8" src="{{asset("js/handlebars-v4.0.11.js")}}"></script>
    <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="{{asset("datatables/js/jquery.dataTables.js")}}"></script>
    @include('UEditor::head')

</head>
<body>
<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="table table-striped table-bordered">
    <thead>
    <tr>
        <th></th>
        <th>序号</th>
        <th>名称</th>
        <th>标识</th>
        <th>输出类型</th>
    </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
    {{--<tr>
        <th>序号</th>
        <th>标题</th>
        <th>连接</th>
    </tr>--}}
    </tfoot>
    <!-- tbody是必须的 -->
</table>




<form action="{{url('/laravel/ue/postContent')}}" method="POST">
    {{csrf_field()}}
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
   <p>姓名:</p>
   <p>学校:</p>
   <p>籍贯:</p>
   <p>政治面貌:</p>

    </script>
    <input type="submit" value="提交">
</form>
<script id="details-template" type="text/x-handlebars-template">
    <table class="table">
        <tr>
            <td>Full name:</td>
            <td>@{{placeholder_name}}</td>
        </tr>
        <tr>
            <td>Email:</td>
            <td>@{{placeholder_code}}</td>
        </tr>
        <tr>
            <td>Extra info:</td>
            <td>And any further details here (images etc)...</td>
        </tr>
    </table>
</script>

<!-- 实例化编辑器 -->
<script type="text/javascript">

    var ue = UE.getEditor('container');
    ue.ready(function() {
        ue.execCommand('serverparam', '_token', '{{ csrf_token() }}');//此处为支持laravel5 csrf ,根据实际情况修改,目的就是设置 _token 值.
    });
    <!--第三步：初始化Datatables-->
    $(document).ready( function () {
        var template = Handlebars.compile($("#details-template").html());
        var table = $('#table_id_example').DataTable({
            //"iDisplayLength" : 10,//默认每页数量
            //"bPaginate": true, //翻页功能
            "bLengthChange" : true, //改变每页显示数据数量
            //"bFilter" : true, //过滤功能
            "ordering" : false,
            "bSort" : false, //排序功能
            //"bInfo" : true,//页脚信息
            //"bAutoWidth" : true,//自动宽度
            "stateSave" : true,
            "retrieve" : true,
            "processing" : true,
            "serverSide" : true,
            //"bPaginate" : true,
            ajax: {
                //指定数据源
                url: "{{url("laravel/ue/postDataForPlaceholderList")}}",
                type: "POST",
                data: function (data) {
                    data._token = "{{ csrf_token() }}";
                }
            },
            "paging": true,//开启表格分页
            //每页显示三条数据
            pageLength: 3,
            columns: [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "searchable":     false,
                    "data":           null,
                    "defaultContent": ''
                },
                {
                    'data': "id"//,'name': 'id'
                },
                {
                    'data': "placeholder_name",'name': 'placeholder_name'
                },
                {
                    'data': "placeholder_code",'name': "placeholder_code"
                },
                {
                    'data': "placeholder_type_name",//'name': "placeholder_type_name",
                    'search': null
                }],
            "columnDefs": [{
                // "visible": false,
                //"targets": 0
            },
                {
                    "targets": 3,
                    "render": function(data, type, row, meta) {
                        console.log(row)
                        //渲染 把数据源中的标题和url组成超链接
                        //return '<a href="' + data + '" target="_blank">' + row.placeholder_code + '</a>';
                        return '<button onclick="insertCode(\'' + data + '\')">' + row.placeholder_code + '</button>';
                    },
                    //指定是第三列

                }, {
                    //设置第一列不参与搜索
                    "targets":[4],
                    "searchable":false
                }]
        });
        console.log(Handlebars.compile)
        // Add event listener for opening and closing details
        $('#table_id_example tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );

            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( template(row.data()) ).show();
                tr.addClass('shown');
            }
        });

    } );

    function insertCode(pCode) {
        var exStr = "@{{" + pCode + "}}";
        UE.getEditor('container').execCommand('inserthtml', exStr);
    }

</script>
</body>


</html>
